<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忘记密码</title>
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #FFD700 0%, #1E90FF 100%);
      position: relative;
      overflow: auto;
    }

    /* 添加一个半透明遮罩层增强背景效果 */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: -1;
    }

    .forgot-container {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 30px;
      width: 420px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .forgot-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    }

    .forgot-container h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #fff;
      font-size: 28px;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #fff;
      font-weight: 500;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .form-group input {
      width: 100%;
      padding: 10px 12px;
      border: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.8);
      font-size: 15px;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .form-group input:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
      transform: translateY(-1px);
    }

    .btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(45deg, #1E90FF, #0066CC);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(30, 144, 255, 0.4);
      margin-top: 5px;
    }

    .btn:hover {
      background: linear-gradient(45deg, #0066CC, #004499);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(30, 144, 255, 0.6);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 3px 10px rgba(30, 144, 255, 0.4);
    }

    .message {
      text-align: center;
      margin-top: 15px;
      padding: 10px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      font-size: 14px;
    }

    .error {
      background: rgba(248, 215, 218, 0.8);
      color: #721c24;
      border: 1px solid rgba(245, 198, 203, 0.5);
      backdrop-filter: blur(5px);
    }

    .success {
      background: rgba(212, 237, 218, 0.8);
      color: #155724;
      border: 1px solid rgba(195, 230, 203, 0.5);
      backdrop-filter: blur(5px);
    }

    .login-link {
      text-align: center;
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      font-size: 14px;
    }

    .login-link a {
      color: #b3e0ff;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .login-link a:hover {
      color: #fff;
      text-decoration: underline;
      text-shadow: 0 0 8px rgba(179, 224, 255, 0.8);
    }

    /* 验证码区域样式 */
    .code-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .code-input {
      width: 100%;
      padding: 10px 12px;
      border: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.8);
      font-size: 15px;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .code-button-container {
      display: flex;
      gap: 8px;
    }

    .code-btn {
      flex: 1;
      padding: 10px;
      background: linear-gradient(45deg, #6c757d, #5a6268);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(108, 117, 125, 0.4);
    }

    .code-btn:hover {
      background: linear-gradient(45deg, #5a6268, #495057);
      transform: translateY(-1px);
      box-shadow: 0 5px 15px rgba(108, 117, 125, 0.6);
    }

    .code-btn:disabled {
      background: rgba(204, 204, 204, 0.7);
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 2px 8px rgba(204, 204, 204, 0.4);
    }

    /* 步骤指示器样式 */
    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      position: relative;
    }

    .step-indicator::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.3);
      z-index: 1;
    }

    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }

    .step-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-bottom: 5px;
      transition: all 0.3s ease;
    }

    .step.active .step-circle {
      background: #1E90FF;
      box-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
    }

    .step.completed .step-circle {
      background: #FFD700;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .step-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;
    }

    .step.active .step-text {
      color: #1E90FF;
      font-weight: bold;
      text-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
    }

    .step.completed .step-text {
      color: #FFD700;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }

    .step-content {
      display: none;
    }

    .step-content.active {
      display: block;
    }

    /* 密码提示样式 */
    .password-hint {
      font-size: 12px;
      margin-top: 4px;
      transition: all 0.3s ease;
    }

    .password-hint.valid {
      color: #28a745;
    }

    .password-hint.invalid {
      color: #dc3545;
    }

    /* 添加一些装饰性元素增强毛玻璃效果 */
    .glass-shard {
      position: fixed;
      width: 80px;
      height: 80px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      z-index: -1;
      animation: float 15s infinite ease-in-out;
    }

    .glass-shard:nth-child(1) {
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    .glass-shard:nth-child(2) {
      top: 70%;
      right: 10%;
      animation-delay: 3s;
      width: 120px;
      height: 120px;
    }

    .glass-shard:nth-child(3) {
      bottom: 15%;
      left: 15%;
      animation-delay: 6s;
      width: 60px;
      height: 60px;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-15px) rotate(3deg);
      }
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
      body {
        padding: 10px;
      }

      .forgot-container {
        width: 95%;
        padding: 20px 15px;
        max-height: 95vh;
      }

      .forgot-container h2 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .form-group {
        margin-bottom: 12px;
      }

      .glass-shard {
        display: none;
      }
    }

    /* 滚动条样式 */
    .forgot-container::-webkit-scrollbar {
      width: 6px;
    }

    .forgot-container::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
    }

    .forgot-container::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
    }

    .forgot-container::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
<!-- 装饰性毛玻璃元素 -->
<div class="glass-shard"></div>
<div class="glass-shard"></div>
<div class="glass-shard"></div>

<div class="forgot-container">
  <h2>找回密码</h2>

  <!-- 步骤指示器 -->
  <div class="step-indicator">
    <div class="step completed" id="step1">
      <div class="step-circle">1</div>
      <div class="step-text">验证手机</div>
    </div>
    <div class="step active" id="step2">
      <div class="step-circle">2</div>
      <div class="step-text">验证身份</div>
    </div>
    <div class="step" id="step3">
      <div class="step-circle">3</div>
      <div class="step-text">设置新密码</div>
    </div>
  </div>

  <!-- 第一步：验证手机号 -->
  <div class="step-content active" id="step1-content">
    <form id="step1Form">
      <div class="form-group">
        <label for="phoneNumber">手机号</label>
        <input type="text" id="phoneNumber" name="phoneNumber" required maxlength="11" placeholder="请输入您的手机号">
      </div>
      <button type="button" class="btn" id="verifyPhoneBtn">下一步</button>
    </form>
  </div>

  <!-- 第二步：验证验证码 -->
  <div class="step-content" id="step2-content">
    <form id="step2Form">
      <div class="form-group">
        <label for="verificationCode">验证码</label>
        <div class="code-group">
          <input type="text" id="verificationCode" name="verificationCode" class="code-input" required maxlength="6" placeholder="请输入验证码">
          <div class="code-button-container">
            <button type="button" id="sendCodeBtn" class="code-btn">发送验证码</button>
          </div>
        </div>
      </div>
      <button type="button" class="btn" id="verifyCodeBtn">验证</button>
    </form>
  </div>

  <!-- 第三步：设置新密码 -->
  <div class="step-content" id="step3-content">
    <form id="step3Form">
      <div class="form-group">
        <label for="newPassword">新密码</label>
        <input type="password" id="newPassword" name="newPassword" required maxlength="20" placeholder="请输入新密码">
        <div class="password-hint" id="passwordHint">密码长度需在6-20位，且必须包含数字和字母</div>
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required maxlength="20" placeholder="请确认新密码">
        <div class="password-hint" id="confirmPasswordHint"></div>
      </div>
      <button type="button" class="btn" id="resetPasswordBtn">重置密码</button>
    </form>
  </div>

  <div id="message"></div>
  <div class="login-link">
    想起密码？<a href="login.html">立即登录</a>
  </div>
</div>

<script>
  // 密码验证函数
  function validatePassword(password) {
    // 检查长度
    if (password.length < 6 || password.length > 20) {
      return { valid: false, message: '密码长度需在6-20位' };
    }

    // 检查是否包含数字和字母
    const hasNumber = /\d/.test(password);
    const hasLetter = /[a-zA-Z]/.test(password);

    if (!hasNumber || !hasLetter) {
      return { valid: false, message: '密码必须包含数字和字母' };
    }

    return { valid: true, message: '密码格式正确' };
  }

  // 密码输入框实时验证
  document.getElementById('newPassword').addEventListener('input', function() {
    const password = this.value;
    const hint = document.getElementById('passwordHint');

    if (password.length === 0) {
      hint.textContent = '密码长度需在6-20位，且必须包含数字和字母';
      hint.className = 'password-hint';
      return;
    }

    const result = validatePassword(password);
    hint.textContent = result.message;
    hint.className = result.valid ? 'password-hint valid' : 'password-hint invalid';
  });

  // 确认密码输入框实时验证
  document.getElementById('confirmPassword').addEventListener('input', function() {
    const password = document.getElementById('newPassword').value;
    const confirmPassword = this.value;
    const hint = document.getElementById('confirmPasswordHint');

    if (confirmPassword.length === 0) {
      hint.textContent = '';
      return;
    }

    if (password !== confirmPassword) {
      hint.textContent = '两次输入的密码不一致';
      hint.className = 'password-hint invalid';
    } else {
      hint.textContent = '密码一致';
      hint.className = 'password-hint valid';
    }
  });

  // 验证手机号
  document.getElementById('verifyPhoneBtn').addEventListener('click', function() {
    const phoneNumber = document.getElementById('phoneNumber').value;

    if (!phoneNumber) {
      showMessage('请输入手机号', 'error');
      return;
    }

    // 手机号格式验证
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phoneNumber)) {
      showMessage('手机号格式不正确', 'error');
      return;
    }

    // 验证手机号是否存在
    fetch('/visitors/findByPhoneNumber?phoneNumber=' + encodeURIComponent(phoneNumber))
            .then(response => response.json())
            .then(data => {
              if (data.code === 200 && data.data) {
                showMessage('手机号验证成功', 'success');
                // 进入下一步
                goToStep(2);
              } else {
                showMessage('该手机号未注册，请检查后重试', 'error');
              }
            })
            .catch(error => {
              console.error('Error:', error);
              showMessage('验证失败，请稍后重试', 'error');
            });
  });

  // 发送验证码（与注册页面保持一致）
  document.getElementById('sendCodeBtn').addEventListener('click', function() {
    const phoneNumber = document.getElementById('phoneNumber').value;

    if (!phoneNumber) {
      showMessage('请先填写手机号', 'error');
      return;
    }

    // 手机号格式验证
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phoneNumber)) {
      showMessage('手机号格式不正确', 'error');
      return;
    }

    // 禁用按钮并显示倒计时
    const btn = this;
    btn.disabled = true;
    let countdown = 60;
    btn.textContent = `${countdown}秒后重发`;

    const timer = setInterval(() => {
      countdown--;
      btn.textContent = `${countdown}秒后重发`;
      if (countdown <= 0) {
        clearInterval(timer);
        btn.disabled = false;
        btn.textContent = '发送验证码';
      }
    }, 1000);

    // 发送验证码请求（使用与注册相同的接口）
    fetch('/auth/sendCode', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `phoneNumber=${encodeURIComponent(phoneNumber)}`
    })
            .then(response => response.json())
            .then(data => {
              if (data.code === 200) {
                showMessage('验证码已发送，请注意查收', 'success');
              } else {
                showMessage(data.message || '验证码发送失败，请稍后重试', 'error');
                // 如果发送失败，立即恢复按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.textContent = '发送验证码';
              }
            })
            .catch(error => {
              console.error('Error:', error);
              showMessage('验证码发送失败', 'error');
              // 如果发送失败，立即恢复按钮
              clearInterval(timer);
              btn.disabled = false;
              btn.textContent = '发送验证码';
            });
  });
  // 验证验证码
  document.getElementById('verifyCodeBtn').addEventListener('click', function() {
    const phoneNumber = document.getElementById('phoneNumber').value;
    const verificationCode = document.getElementById('verificationCode').value;

    if (!verificationCode) {
      showMessage('请输入验证码', 'error');
      return;
    }

    // 验证验证码格式
    const codeRegex = /^\d{6}$/;
    if (!codeRegex.test(verificationCode)) {
      showMessage('验证码为6位数字', 'error');
      return;
    }

    // 验证验证码 - 使用正确的接口
    fetch('/auth/verifyCode', {  // ✅ 使用正确的验证接口
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `phoneNumber=${encodeURIComponent(phoneNumber)}&code=${encodeURIComponent(verificationCode)}`
    })
            .then(response => response.json())
            .then(data => {
              if (data.success) {  // ✅ 根据新的响应结构判断
                showMessage('验证码验证成功', 'success');
                // 进入下一步
                goToStep(3);
              } else {
                showMessage('验证码错误，请重新输入', 'error');
              }
            })
            .catch(error => {
              console.error('Error:', error);
              showMessage('验证失败，请稍后重试', 'error');
            });
  });

  // 重置密码
  document.getElementById('resetPasswordBtn').addEventListener('click', function() {
    const phoneNumber = document.getElementById('phoneNumber').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    // 密码验证
    const passwordValidation = validatePassword(newPassword);
    if (!passwordValidation.valid) {
      showMessage(passwordValidation.message, 'error');
      return;
    }

    // 确认密码验证
    if (newPassword !== confirmPassword) {
      showMessage('两次输入的密码不一致', 'error');
      return;
    }

    // 发送重置密码请求
    fetch('/visitors/resetPassword', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        phoneNumber: phoneNumber,
        newPassword: newPassword
      })
    })
            .then(response => response.json())
            .then(data => {
              if (data.code === 200) {
                showMessage('密码重置成功，请重新登录', 'success');
                // 重置成功，跳转到登录页面
                setTimeout(() => {
                  window.location.href = 'login.html';
                }, 1500);
              } else {
                showMessage(data.message || '密码重置失败，请稍后重试', 'error');
              }
            })
            .catch(error => {
              console.error('Error:', error);
              showMessage('密码重置失败，请稍后重试', 'error');
            });
  });

  // 跳转到指定步骤
  function goToStep(step) {
    // 更新步骤指示器
    document.querySelectorAll('.step').forEach((el, index) => {
      if (index + 1 < step) {
        el.classList.add('completed');
        el.classList.remove('active');
      } else if (index + 1 === step) {
        el.classList.add('active');
        el.classList.remove('completed');
      } else {
        el.classList.remove('active', 'completed');
      }
    });

    // 显示对应步骤内容
    document.querySelectorAll('.step-content').forEach((el, index) => {
      if (index + 1 === step) {
        el.classList.add('active');
      } else {
        el.classList.remove('active');
      }
    });
  }

  // 显示消息
  function showMessage(text, type) {
    const messageDiv = document.getElementById('message');
    messageDiv.className = `message ${type}`;
    messageDiv.textContent = text;

    // 3秒后自动清除消息
    setTimeout(() => {
      messageDiv.className = 'message';
      messageDiv.textContent = '';
    }, 3000);
  }
</script>
</body>
</html>